<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				height: 100%;
				width: 100%;
				max-width: 640px;
				margin: auto;
				background-image: url(img/1-161103152547-50.jpg);
				background-size: cover;
			}
			
			html {
				height: 100%;
				width: 100%;
			}
			
			.big {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
			}
			
			.top {
				margin-top: 40px;
				position: relative;
			}
			
			label {
				opacity: 0;
			}
			
			.top div {
				text-align: center;
				margin-bottom: 30px;
				color: white;
			}
			
			.top span {
				color: #FF608E;
			}
			
			.top div:first-of-type {
				font-family: "微软雅黑";
				height: 50px;
				line-height: 40px;
				font-size: 60px;
				color: white;
			}
			
			.top div:nth-child(2) {
				font-size: 22px;
			}
			
			.main {
				border: 1px solid #FF608E;
				margin: 10px;
				padding: 10px;
				background-color: white;
				border-radius: 10px;
			}
			
			.maindiv {
				display: -webkit-box;
			}
			
			.maindiv div:first-of-type {
				width: 80px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
			}
			
			.maindiv div:last-of-type {
				width: 100%;
				height: 40px;
				line-height: 40px;
			}
			
			.maindiv div input {
				width: 100%;
				border: 0px;
				height: 30px;
				padding: 5px;
				outline: none;
				color: #C0BFC4;
				font-size: 14px;
				margin-top: -4px;
			}
			
			.maindiv span {
				font-size: 20px;
			}
			
			.queding,
			.queding2 {
				height: 40px;
				margin: 10px 20px;
				background-color: #FF608E;
				color: white;
				border-radius: 20px;
				text-align: center;
				line-height: 40px;
			}
			
			.qiehuan,
			.qiehuan2 {
				line-height: 30px;
				font-size: 12px;
				text-align: center;
			}
			
			.queding2 {
				background-color: #007AFF;
			}
			
			.foot {
				-webkit-box-align: end;
				font-size: 14px;
				text-align: center;
				color: #FF608E;
				font-weight: bold;
				margin-top: 30px;
			}
		</style>
	</head>

	<body>
		<div class="big">
			<div class="top">
				<div><label>w</label><label>e</label><label>.</label><label>.</label><label>.</label></div>
				<div><span><label>结</label><label>婚</label></span><label>吧</label><label>？</label></div>
			</div>
			<div class="main">
				<div class="am-tabs" id="doc-my-tabs">
					<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
						<li class="am-active">
							<a href="">登陆</a>
						</li>
						<li>
							<a href="">注册</a>
						</li>
					</ul>
					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active">
							<div class="maindiv">
								<div><span class="Hui-iconfont Hui-iconfont-avatar2"></span></div>
								<div><input type="text" v-model="name"/></div>
							</div>
							<div class="maindiv">
								<div><span class="Hui-iconfont Hui-iconfont-suoding"></span></div>
								<div><input type="password" v-model="pas" /></div>
							</div>
							<div class="queding" @click="init">
								登陆
							</div>
							<div class="qiehuan">
								<div>没有账号？立即注册</div>
							</div>
						</div>
						<div class="am-tab-panel">
							<div class="maindiv">
								<div>账号</div>
								<div><input type="text" id="name" /></div>
							</div>
							<div class="maindiv">
								<div>密码</div>
								<div><input type="password" id="pas" /></div>
							</div>
							<div class="queding2">
								注册
							</div>
							<div class="qiehuan2">
								<div>立即登陆</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="foot">
				<div><label>Y</label><label>&</label><label>M</label></div>
			</div>
		</div>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/myvue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//初始化
			window.onload = function() {
				var APP_ID = 'Wx3JTgmqBaARoWCaGI96AM9h-gzGzoHsz';
				var APP_KEY = 'TrVpB16Og6Yac9u3BoiUy4hT';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
			}
			$(function() {
					$('#doc-my-tabs').tabs();
				})
				//下面注册点击
			$(".qiehuan").click(function() {
				$("#doc-my-tabs").tabs('open', 1);
			})
			$(".qiehuan2").click(function() {
					$("#doc-my-tabs").tabs('open', 0);
				})
				//初始动画
			$("label").each(function(i) {
					$(this).animate({
						opacity: 1
					}, (i + 1) * 600);
				})
				//注册点击
			$(".queding2").click(function() {
				var $pas = $("#pas").val();
				var $name=$("#name").val();
				var $email=$("#email").val();
				var user = new AV.User();
				// 设置用户名
				user.setUsername($name);
				// 设置密码
				user.setPassword($pas);
				// 设置邮箱
				user.setEmail($email);
				user.signUp().then(function(loginedUser) {
					//注册成功
					console.log("注册成功")
					AV.User.logIn($email,$pas).then(function(loginedUser) {
						location.href="../index.html";
						console.log("登录成功");
					}, function(error) {
						console.log("登录失败");
					});
				}, function(error) {
					alert("注册失败")
				});
			})
		</script>
	</body>

</html>